<template>
    <form autocomplete="off" class="validate-form">
        <div class="form-group">
            <label>姓名：</label>
            <input type="text" 
                    placeholder="必填" 
                    v-model="form.name"
                    v-valid:form.name="[{
                        message: '名称不能为空'
                    }]"
                    atuofocus="autofocus" />
        </div>
        <div class="form-group">
            <label>年龄：</label>
            <input type="text"
                    placeholder="10~100"
                    v-model="form.age"
                    valid-type="int"
                    v-valid:form.age="[{
                        rule: 'min',
                        message: '年龄不能小于10',
                        min: 10
                    },{
                        rule: 'max',
                        message: '年龄不能大于100',
                        max: 100
                    }]" />
        </div>
        <div class="form-group">
            <label>外表：</label>
            <input type="text"
                    placeholder="请输入'ugly'"
                    v-model="form.appearance"
                    v-valid:form.appearance="[{
                        rule: 'func',
                        message: '是的，你很丑',
                        func: validateAppearance
                    }]" />
        </div>
        <div><label>$valid.form.name：</label><span>{{$valid.form.name}}</span></div>
        <div><label>$valid.form.age：</label><span>{{$valid.form.age}}</span></div>
        <div><label>$valid.form.appearance：</label><span>{{$valid.form.appearance}}</span></div>
        <div class="operate-area">
            <button @click="submit">提交</button>
            <button @click="reset">重置</button>
            <button @click="validateAge">验证年龄</button>
            <button @click="resetAppearance">重置外表</button>
            <button valid-cancel>取消</button>
        </div>
    </form>
</template>
<script>
    export default {
        data(){
            return {
                form: {
                    name: '',
                    age: '',
                    appearance: ''
                }
            }
        },
        methods: {
            validateAppearance(){
                var words = this.form.appearance ;
                if( words === 'ugly'  ){
                    // return false ;
                    return '你真的很丑' ;    // 重写message
                }
                return true ;
            },
            submit(){
                this.$valid.getResult().then(function(){
                    alert('验证通过') ;
                })
            },
            reset(){
                this.$valid.reset();
            },
            validateAge(){
                this.$valid.getResult('form.age').then(function(){
                    alert('验证通过') ;
                })
            },
            resetAppearance(){
                this.$valid.reset('form.appearance');
            }
            
        } ,
        valid: true 
    }
</script>
<style lang="scss">
    .validate-form {
        .form-group {
            margin-bottom: 10px;
        }
        .operate-area {
            margin-top: 10px;
            button {
                margin-right: 10px;
            }
        }
    }
</style>
